<template>
  <div>
    <van-nav-bar
  title="城市列表"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<!-- <button @click="greCityList">asdasji</button> -->
<van-index-bar :index-list="indexList" highlight-color>
  <van-index-anchor index="#">当前定位</van-index-anchor>
  <van-cell :title=nowCity />

  <van-index-anchor index="热">热门城市</van-index-anchor>
  <van-cell  title="北京" />
  <van-cell  title="上海" />
  <van-cell  title="广州" />
  <van-cell  title="深圳" />

  <van-index-anchor
  v-for="(item) in indexList"
  v-show="item!=='热'"
  :key="item.value"
  :index="item">{{item}}
<div v-for="(obj) in cityList"
  :key="obj.value">
<van-cell
  v-if="obj.short.slice(0,1)===item"
  :title="obj.label"
  @click="changeCIty(obj)"
  />

</div>
</van-index-anchor>

</van-index-bar>
  </div>
</template>

<script>
import { getAreaAPI } from '@/api'
import { Toast } from 'vant'

export default {
  data () {
    return {
      nowCity: localStorage.getItem('nowCity'),
      cityValue: localStorage.getItem('cityValue'),
      indexList: ['热'],
      Arealist: [],
      cityList: [],
      selectCity: [],
      contentCity: []
    }
  },
  methods: {
    changeCIty (val) {
      localStorage.setItem('nowCity', val.label)
      localStorage.setItem('cityValue', val.value)
      this.nowCity = val.label
      this.cityValue = val.value
      this.onClickLeft()
    },
    // 切换城市后 自动返回list页面
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      Toast('按钮')
    },
    // 调用api 得到地区数据
    async getArea () {
      const res = await getAreaAPI()
      this.cityList = res.data.body
      console.log(this.cityList)
    },
    // 函数使得到的数据生到对应数组
    greCityList () {
      this.indexList.push(...Array.from(new Set(
        this.cityList.map(obj => obj.short.charAt(0)))).sort())
      console.log(this.indexList)
    }
  },
  async created () {
    this.Arealist = await this.getArea()
    this.greCityList()
  }
  // computed () {

  // }
}
</script>

<style>

</style>
